<template>
  <div>

    <carTitle :isShow1="isShow1" :isShow2="isShow2" :isShow3="isShow3">
      <span slot="title-one" class="title-one">新增车辆</span>
      <span slot="title-two" class="title-two">新增车辆说明说明</span>
    </carTitle>

    <div class="mycar-body">
      <el-row >
        <el-col :span="22" class="body-wrapper">
          <el-row :gutter="10">
            <el-col :span="7">
              <el-row>
                <el-col :span="6" class="right-title">司机姓名</el-col>
                <el-col :span="18">
                  <el-input v-model="inputa" placeholder="姓名、车牌号、手机号"></el-input>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="7">
              <el-row>
                <el-col :span="6" class="right-title">车牌号</el-col>
                <el-col :span="18">
                  <el-input v-model="inputb" placeholder="请输入车牌号"></el-input>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="7">
              <el-row>
                <el-col :span="6" class="right-title">手机号</el-col>
                <el-col :span="18">
                  <el-input v-model="inputc" placeholder="请输入手机号"></el-input>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="7">
              <el-row>
                <el-col :span="6" class="right-title">司机姓名</el-col>
                <el-col :span="18">
                  <sel :options="optionsa" :text="valuea" class="selects"></sel>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="7">
              <el-row>
                <el-col :span="6" class="right-title">车牌号</el-col>
                <el-col :span="18">
                  <sel :options="optionsb" :text="valueb" class="selects"></sel>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="7">
              <el-row>
                <el-col :span="6" class="right-title">手机号</el-col>
                <el-col :span="18">
                  <sel :options="optionsc" :text="valuec" class="selects"></sel>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="7">
              <el-row>
                <el-col :span="6" class="right-title">容积</el-col>
                <el-col :span="18">
                  <sel :options="optionsd" :text="valued" class="selects"></sel>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="7">
              <el-row>
                <el-col :span="6" class="right-title">期望流量</el-col>
                <el-col :span="18">
                  <el-input v-model="inputd" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="7" :offset="7">
              <el-row>

                <el-col :span="18" :offset="6">
                  <el-button type="success" id="newBtn">保存并邀请</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <p class="text">提交后请及时通知司机回复同意定位信息，或请司机用以上手机编辑短息XX发送到XXX</p>
              <p class="text">确认后才可开启定位等认证服务</p>
            </el-col>
          </el-row>
        </el-col>

      </el-row>

    </div>
  </div>
</template>

<script>
  import carTitle from '@/components/car-title'
  import sel from '@/components/select'
  export default {
    data(){
      return {
        value: '',
        inputa: '',
        inputb: '',
        inputc: '',
        inputd: '',
        valuea: '23',
        optionsa: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
        valueb: '2',
        optionsb: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
        valuec: '1',
        optionsc: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }
        ],
        valued: '1',
        optionsd: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
        isShow1:false,
        isShow2:true,
        isShow3:false
      }
    },
    components: {
      carTitle,
      sel
    }
  }
</script>
<style lang="scss">
  .title {
    padding: 35px 0 33px 30px;
    .title-one {
      font-size: 20px;
      line-height: 20px;
      font-weight: 700;
      color: #3149a9 !important;
    }
    .title-two {
      line-height: 20px;
      font-size: 14px;
      color: #8b9aaf;
    }
    i {
      font-size: 20px;
      font-weight: 700;
      color: #acafc2;
    }
  }

  .body-wrapper {
    background: #ffffff;
    margin-left: 30px;
    padding: 30px 20px;
    border: 1px solid #e7e8ed;
    .right-title {
      text-align: right;
      padding-right: 15px;
      line-height: 36px;
      height: 36px;
      font-weight: 800;
      color: #AEB5BF;
      font-size: 14px;
    }
    .el-row {
      margin: 10px 0;
    }
    .selects {
      width: 100%;
    }
    #newBtn{
      width: 100%;
    }
    .text{
      font-size: 10px;
      color: gray;
      text-align: center;
      line-height: 2;
    }

  }


</style>
